
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
 
	<!-- swiper / 3D流滑动 start-->
	<!-- 文档地址 https://www.swiper.com.cn/api/ -->
	<div class="swiper-container" style="height: 300px;padding: 50px 0">
	    <div class="swiper-wrapper" style="width: 300px;">
	    	<div class="swiper-slide" style="background-color: blue"></div>
	    	<div class="swiper-slide" style="background-color: yellow"></div>
	    	<div class="swiper-slide" style="background-color: pink"></div>
	    	<div class="swiper-slide" style="background-color: red"></div>
	    	<div class="swiper-slide" style="background-color: black"></div>
	     
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination"></div>
	</div>

	<script type="text/javascript">
		
	    var swiper = new Swiper('.swiper-container', {
			effect: 'coverflow',//slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
			grabCursor: true,//设置为true,鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
			centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左
			slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。
			//可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
			//loop : true,//设置为true 则开启loop模式
			coverflowEffect: {
			rotate: 30,//slide做3d旋转时Y轴的旋转角度
			stretch: 10,//每个slide之间的拉伸值，越大slide靠得越紧。
			depth: 60,//slide的位置深度。值越大z轴距离越远，看起来越小。
			modifier: 2,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。
			slideShadows: true,//是否开启slide阴影
			},
			pagination: {
			el: '.swiper-pagination',
			},
	    });

  	</script>
	<!-- swiper / 3D流滑动 end-->
	
